<template>
  <view class="chat-container">
    <view class="header">
      <text class="title">问答小助手</text>
      <text class="tip">有任何问题都可以向我提问</text>
    </view>
    
    <scroll-view 
      class="message-list" 
      scroll-y 
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      @scrolltoupper="loadMoreMessages"
    >
      <view class="message-wrapper" v-for="(msg, index) in messages" :key="index">
        <view class="message" :class="msg.type">
          <view class="avatar" v-if="msg.type === 'ai'">
            <image src="/static/ai-assistor.png" mode="aspectFill"></image>
          </view>
          <view class="content">
            <text>{{ msg.content }}</text>
          </view>
          <view class="avatar" v-if="msg.type === 'user'">
            <image src="/static/avatar-default.png" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <view class="input-area">
      <input 
        class="message-input" 
        v-model="inputMessage" 
        placeholder="请输入您的问题"
        confirm-type="send"
        @confirm="sendMessage"
      />
      <button class="send-btn" @click="sendMessage" :disabled="!inputMessage.trim()">
        <image src="/static/发送.png" mode="aspectFit" class="send-icon"></image>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputMessage: '',
      messages: [],
      scrollTop: 0
    }
  },
  onLoad() {
    // 添加欢迎消息
    this.addMessage({
      type: 'ai',
      content: '你好！我是朋知云学的问答小助手，有什么可以帮助你的吗？'
    });
  },
  methods: {
    // 发送消息
    sendMessage() {
      if (!this.inputMessage.trim()) return;
      
      // 添加用户消息
      this.addMessage({
        type: 'user',
        content: this.inputMessage
      });
      
      const userQuestion = this.inputMessage;
      this.inputMessage = '';
      
      // 模拟AI回复
      setTimeout(() => {
        // 这里是模拟回复，后续可以替换为实际的API调用
        this.addMessage({
          type: 'ai',
          content: this.getSimulatedResponse(userQuestion)
        });
      }, 500);
    },
    
    // 添加消息到列表
    addMessage(msg) {
      this.messages.push(msg);
      this.$nextTick(() => {
        // 滚动到底部
        this.scrollToBottom();
      });
    },
    
    // 滚动到底部
    scrollToBottom() {
      // 使用一个很大的值确保滚动到底部
      this.scrollTop = 100000;
    },
    
    // 加载更多消息（上拉加载）
    loadMoreMessages() {
      // 实际项目中可以在这里加载历史消息
      console.log('加载更多消息');
    },
    
    // 模拟AI回复（临时方案，后续会替换为实际API）
    getSimulatedResponse(question) {
      // 简单的关键词匹配回复
      if (question.includes('你好') || question.includes('您好')) {
        return '你好！很高兴为你服务。';
      } else if (question.includes('支教') || question.includes('教学')) {
        return '朋知云学平台提供支教信息发布、组队申请等功能，帮助有需要的学校和志愿者建立联系。';
      } else if (question.includes('如何') && question.includes('申请')) {
        return '您可以在首页浏览支教需求，找到合适的项目后点击"申请组队"按钮，填写联系方式和申请说明即可。';
      } else if (question.includes('组队') || question.includes('加入')) {
        return '您可以通过申请组队功能留下您的联系方式，对方确认后会与您取得联系。';
      } else if (question.includes('发布') || question.includes('创建')) {
        return '您可以点击首页右下角的加号按钮，填写相关信息后发布支教需求。';}
		else if (question.includes('你是谁') || question.includes('你叫')) {
		return '我是朋知小助手,欢迎使用小程序,有什么问题尽管问我 ';
      } else {
        return '抱歉，我暂时无法理解您的问题。您可以尝试询问关于支教、申请、组队等相关问题，或者联系客服获取更多帮助。';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  
  .header {
    padding: 30rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .tip {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .message-list {
    flex: 1;
    padding: 30rpx;
    overflow-y: auto;
    
    .message-wrapper {
      margin-bottom: 30rpx;
      
      .message {
        display: flex;
        align-items: flex-start;
        max-width: 80%;
        
        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
          
          image {
            width: 100%;
            height: 100%;
          }
        }
        
        .content {
          margin: 0 20rpx;
          padding: 20rpx;
          border-radius: 12rpx;
          font-size: 28rpx;
          line-height: 1.5;
          word-break: break-all;
        }
        
        &.ai {
          align-self: flex-start;
          
          .content {
            background-color: #fff;
            color: #333;
            box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
            margin-left: 20rpx;
            margin-right: 0;
            border-top-left-radius: 4rpx;
          }
        }
        
        &.user {
          flex-direction: row-reverse;
          align-self: flex-end;
          margin-left: auto;
          
          .content {
            background-color: #5bc0eb;
            color: #fff;
            margin-right: 20rpx;
            margin-left: 0;
            border-top-right-radius: 4rpx;
          }
        }
      }
    }
  }
  
  .input-area {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-top: 2rpx solid #f0f0f0;
    
    .message-input {
      flex: 1;
      height: 80rpx;
      background-color: #f5f7fa;
      border-radius: 40rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
    }
    
    .send-btn {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #5bc0eb, #4a9bd8);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;
      padding: 0;
      box-shadow: 0 6rpx 12rpx rgba(74, 155, 216, 0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.92);
        box-shadow: 0 2rpx 6rpx rgba(74, 155, 216, 0.2);
      }
      
      &:disabled {
        background: linear-gradient(135deg, #cccccc, #bbbbbb);
        box-shadow: none;
      }
      
      .send-icon {
        width: 46rpx;
        height: 46rpx;
        transition: transform 0.2s ease;
      }
      
      &:hover .send-icon {
        transform: scale(1.1);
      }
    }
  }
}
</style>